<template>
  <div class="permission-manage">
    <h3>模型基本信息</h3>
    <a-descriptions :column="1" class="model-info">
      <a-descriptions-item label="模型名称">
        {{ modelData.name }}
      </a-descriptions-item>
      <a-descriptions-item label="模型编号">
        {{ modelData.uuid || '未知' }}
      </a-descriptions-item>
    </a-descriptions>
    <h3>
      模型负责人
      <a-tooltip placement="top">
        <template #title>
          1.修改模型负责人 <br />2.添加删除模型管理员<br />
          3.删除模型 <br />4.模型管理员的所有权限
        </template>
        <a-icon type="question-circle" class="question-circle" />
      </a-tooltip>
    </h3>
    <a-descriptions :column="1" class="model-info">
      <a-descriptions-item label="模型负责人">
        <a-select
          v-model="modelAdmin"
          :options="modelAdminOptions"
          placeholder="请选择模型负责人"
          style="width: 300px"
          @change="handleChange"
        />
      </a-descriptions-item>
    </a-descriptions>
    <h3>模型管理员</h3>
    <a-descriptions :column="1" class="model-info">
      <a-descriptions-item label="模型管理员">
        <a-space>
          <a-select
            v-model="modelManager"
            :options="modelAdminOptions"
            placeholder="请选择模型管理员"
            style="width: 200px"
          />
          <a-button type="primary" @click="addModelManager">添加</a-button>
        </a-space>
      </a-descriptions-item>
      <a-descriptions-item label="管理员列表">
        <a-table :columns="columns" :data-source="managerList" :pagination="false" style="width: 300px">
          <template slot="operation" slot-scope="text, record">
            <a-button type="danger" icon="delete" size="small" @click="deleteModelManager(record)">删除</a-button>
          </template>
        </a-table>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import {
  getAllUserList,
  transferModelCharge,
  createNewModelManager,
  getModelManagerList,
  deleteModelManager,
} from '@/api/manage'
export default {
  name: 'PermissionManage',
  props: {
    modelData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      modelAdminOptions: [],
      modelAdmin: '',
      modelManager: '',
      managerList: [],
      columns: [
        {
          title: '账号',
          dataIndex: 'modelManager',
          key: 'modelManager',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  mounted() {
    console.log('modelData', this.modelData)
    this.getModelAdminOptions()
    this.getModelManagerList()
  },
  methods: {
    async getModelAdminOptions() {
      try {
        const res = await getAllUserList({ modelUuid: this.modelData.uuid })
        if (res.code === 200) {
          this.modelAdminOptions = res.data.map((item) => ({
            label: item.account,
            value: item.account,
          }))
          this.modelAdmin = this.modelData.createdBy || ''
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取管理员列表
    async getModelManagerList() {
      try {
        const res = await getModelManagerList({
          modelUuid: this.modelData.uuid,
        })
        if (res.code === 200) {
          this.managerList = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleChange(val) {
      const _this = this
      this.$confirm({
        title: '更换提醒!',
        content: (h) => <div>确定更换当前模型负责人吗？更换之后不可添加和删除管理员！</div>,
        onOk() {
          transferModelCharge({
            modelUuid: _this.modelData.uuid,
            transferToUserName: val,
          }).then((res) => {
            if (res.code === 200) {
              _this.$message.success(res.message)
              _this.modelAdmin = val
              _this.$emit('updateList')
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
    addModelManager() {
      createNewModelManager({
        modelUuid: this.modelData.uuid,
        transferToUserName: this.modelManager,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.message)
          this.modelManager = ''
          this.getModelManagerList()
        }
      })
    },
    deleteModelManager(record) {
      const _this = this
      this.$confirm({
        title: '删除提醒!',
        content: (h) => <div>确定删除当前管理员 {record.modelManager} 吗？</div>,
        onOk() {
          deleteModelManager({
            modelUuid: _this.modelData.uuid,
            transferToUserName: record.modelManager,
          }).then((res) => {
            if (res.code === 200) {
              _this.$message.success(res.message)
              _this.getModelManagerList()
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
  },
}
</script>

<style lang="less" scoped>
.permission-manage {
  .model-info {
    padding-left: 24px;
  }
  .question-circle {
    color: @primary-color;
  }
}
</style>
